<template>
	<view class="repair-details">
		<view class="details-conten">
			<view class="details-tag">
				<block v-for="(item,index) in tag" :key="index">
					<view :class="currenTag == index? 'tag tag-choose':'tag'" @click="tagChange(index)">
						{{item.title}}
					</view>
				</block>
			</view>
			<!-- 内容主体 -->
			<swiper :current="currenTag" class="conten-swiper" @change="handleSwiperChange" >
				<swiper-item class="conten-swiper-sc">
					<scroll-view :scroll-y="true" class="conten-scroll" :style="{height: swiperHeight + 'px'}">
						<view class="repair-conten">
							<view class="repair-list" v-for="(item,index) in objDataChange" :key="index">
								<view class="list-name">
									{{item.titele}}
								</view>
								<view class="list-info">
									<text v-if="objData[item.objName]"> 
										<text v-if="item.objName == 'status'">
											<text v-if="objData[item.objName] == 0">已取消</text>
											<text v-if="objData[item.objName] == 2">维修中</text>
											<text v-if="objData[item.objName] == 4">已结束</text>
										</text>
										<text v-else>{{objData[item.objName]}}</text>
									 </text>
								</view>
							</view>
						</view>
						<view class="repair-conten">
							<!-- 备注 -->
							<view class="repair-remarks">
								<view class="remarks-title">备注</view>
								<view class="remarks-conten" style="margin: 10rpx;">
									<text v-if="objData[remarks]" class="remarks_s">{{objData[remarks]}}</text>
									<text v-else>暂无备注</text>
								</view>
							</view>
							
						</view>
						<view class="repair-conten">
							<view class="repair-image">
								<view class="image-title">维修图片</view>
								<view class="image-conten" style="margin-top: 10rpx;">
									<block v-if="repairImage.length > 0">
										<image @click="bigImage(index)" v-for=" (item,index) in repairImage" :key="index" :src="item" mode="widthFix" style="height: 200rpx;width: 200rpx;margin-right: 20rpx;"></image>
									</block>
									<text v-else>暂无图片</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item class="conten-swiper-sc">
					<scroll-view :scroll-y="true" class="conten-scroll" :style="{height: swiperHeight + 'px'}" >
						<block v-if="objData.items.length > 0">
						<view class="repair-fee-list">
							<block v-for="(item,index) in objData.items" :key="index">
								<view class="repair-info">
									<view class="info-list" v-for="(item_s,index_s) in objDataList" :key="index_s">
										<view class="info-name">
											{{item_s.titele}}
										</view>
										<view class="info-conten">
											{{item[item_s.objName] || ''}}
										</view>
									</view>
								</view>
							</block>
						</view>
						</block>
						<block v-else>
							<view class="repair-info" style="text-align: center;">
								暂无数据
							</view>
						</block>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import { getExpense } from '../api'
	export default{
		data(){
			return{
			    swiperHeight: 600,
				objData:null,
				tag:[{title:'维修详情'},{title:'费用信息'}],
				currenTag:0,
				objDataList:[{
					titele:'维修项目',
					objName:'itemName',
				},{
					titele:'配件供应商',
					objName:'partsSupplier',
				},{
					titele:'配件名称',
					objName:'partsName',
				},{
					titele:'规格',
					objName:'specifications',
				},{
					titele:'材料费',
					objName:'materialsFee',
				},{
					titele:'工时费',
					objName:'workHoursFee',
				},{
					titele:'备注',
					objName:'comment',
				}],
				
				objDataChange:[{
					titele:'开始时间',
					objName:'startDate',
					must:true
				},{
					titele:'结束时间',
					objName:'endDate',
					must:true
				},{
					titele:'维修内容',
					objName:'repairContent',
					must:true
				},{
					titele:'维修点',
					objName:'repairAddress',
					must:true
				},
				{
					titele:'送修人',
					objName:'sendRepairName',
				},
				{
					titele:'当前里程',
					objName:'currentMileage',
				},
				{
					titele:'总维修费用',
					objName:'repairFee',
				},{
					titele:'状态',
					objName:'status',
				}],
				remarks:'comment',
				repairImage:[],
				id:''
			}
		},
		onLoad(options) {
			if(options.id){
				this.id = options.id
			}
		},
		onShow() {
			this.getList(),
			this.initSwiperHeight();
		},
		methods:{
			initSwiperHeight() {
					uni.getSystemInfo({ 
					  success: (res) => {
						this.swiperHeight = res.windowHeight - 46;
					  }
					})
				  },
			getList(){
				let _then = this
				 getExpense(this.id).then(res=>{
					 console.log('res')
					 console.log(res)
					 _then.objData = res[1].data.data
					 if(_then.objData['repairImage']){
					 _then.repairImage = _then.objData['repairImage'].split(',')
					 }
				 })
			},
			bigImage(data){
				let _than = this
			  wx.previewImage({
				urls: _than.repairImage,
				current:_than.repairImage[data],
				success:function(res){
				  console.log(res)
				},
			  })
			},
			tagChange(index){
				this.currenTag = index
			},
			handleSwiperChange(e){
				this.currenTag = e.detail.current
			}
		}
	}
</script>

<style lang="scss" scoped>
	.repair-details{
		.details-conten{
			width: 100%;
			height: 100vh;
			background-color: #5a5e63;
			.details-tag{
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.tag{
					padding: 20rpx;
					flex: 1;
					line-height: 40rpx;
					color: #fff;
					text-align: center;
					position: relative;
				}
				.tag-choose::after{
					content: '';
					display: inline-block;
					width: 20%;
					height: 4rpx;
					background-color: #fff;
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 0;
				}
			}
			.conten-swiper{
				height: calc(100vh - 100rpx);
				margin-top: 10rpx;
				width: 100%;
				overflow: hidden;
				border-radius: 30rpx 30rpx 0  0;
				background-color: #f2f2f2;
				padding: 20rpx;
				// padding: 20rpx;
				.conten-swiper-sc{
					height: calc(100vh - 90rpx);
					width: 100%;
					overflow: hidden;
					.conten-scroll{
						.repair-conten{
							// height: calc(100vh - 90rpx);
							width: 100%;
							padding: 20rpx;
							background-color: #fff;
							border-radius: 20rpx;
							margin-bottom: 20rpx;
							.remarks_s{
								table-layout: fixed;
								word-wrap: break-word;
								word-break: normal;
								overflow: hidden;
							}
							.repair-list{
								display: flex;
								justify-content: space-between;
								align-items: center;
								line-height: 30rpx;
								font-size: 30rpx;
								position: relative;
								padding-bottom: 10rpx;
							}
							// .repair-list::after{
							// 	content: '';
							// 	width: 100%;
							// 	height: 2rpx;
							// 	background-color: #aaaaaa;
							// 	display: inline-block;
							// 	position: absolute;
							// 	left: 50%;
							// 	transform: translateX(-50%);
							// 	bottom: -15rpx;
							// }
						}
						
						.repair-fee-list {
							padding: 20rpx;
						}
						.repair-info{
							width: 100%;
							padding: 20rpx;
							background-color: #fff;
							border-radius: 20rpx;
							margin-bottom: 20rpx;
							.info-list{
								width: 100%;
								display: flex;
								justify-content: space-between;
								align-items: center;
								line-height: 30rpx;
								font-size: 30rpx;
								position: relative;
								margin-bottom: 10rpx;
								.info-name{
									color: #aaaaaa
								}
								.info-conten{
									
								}
							}
						}
					}
				}
			}
		}
	}
</style>